@prefixCls: ~"c7ncd-subMenu";

.@{prefixCls} {
  position: relative;
  transition: all 0.2s ease 0s;
  .c7n-menu-inline-collapsed {
    width: 50px !important;
    .@{prefixCls}-menuItem {
      width: 50px !important;
      padding-left: 15px !important;
    }
    .@{prefixCls}-menuItem-sub {
      .c7n-menu-submenu-title {
        padding-left: 15px !important;
      }
    }
  }
  &-collapseBtn {
    position: absolute;
    top: 14px;
    right: -8px;
    z-index: 20;
    cursor: pointer;
  }
  &-menu {
    height: 100%;
    padding-top: 10px !important;
    background-color: #fafafa !important;
    border-right: 1px solid #d9e6f2 !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  &-menuItem {
    width: 200px !important;
    line-height: 44px !important;
    height: 44px !important;
    padding: 0 20px !important;

    &.c7n-menu-item-selected {
      .@{prefixCls}-menuItem-link {
        &-name,
        & > .icon {
          color: var(--primary-color) !important;
        }
      }
    }

    &-link {
      font-size: 0.14rem;
      text-decoration: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 140px;
      height: 100%;
      display: flex;
      &-collapsed {
        overflow: visible;
      }
      &-name {
        flex: 1;
      }
      &:hover {
        color: var(--primary-color) !important;
      }
      & > .icon {
        font-size: 20px !important;
        margin-right: 0.15rem !important;
        line-height: 43px !important;
      }
      > span {
        margin-left: 5px;
      }
    }

    &-sub {
      &.c7n-menu-submenu-selected {
        .@{prefixCls}-menuItem-sub-title {
          &-name,
          & > .icon {
            color: var(--primary-color) !important;
          }
        }
      }
      .c7n-menu-submenu-title {
        padding-left: 20px !important;
      }
      &-title {
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        &-name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &-icon {
          font-size: 20px !important;
          margin-right: 16px !important;
          line-height: 43px !important;
        }
        > span {
          margin-left: 5px;
        }
      }
    }
  }
}
